<template>
  <div class="main">
    <div>
      <div>
        <img src="../../assets/img/main-3.png" />
      </div>
      <div>
        <el-menu
          :unique-opened="true"
          @select="menuSelect"
          text-color="#fff"
          background-color="#222453"
        >
          <el-menu-item index="1">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>{{ $t("route.FirstPage") }}</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <cpu />
              </el-icon>
              <span>{{ $t("route.DeviceManager") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">{{ $t("route.Device_List") }}</el-menu-item>
              <el-menu-item index="2-2">{{ $t("route.Lending_Logs") }}</el-menu-item>
              <el-menu-item index="2-3">{{ $t("route.Borrowing_record") }}</el-menu-item>
              <el-menu-item index="2-5">{{ $t("route.Scrap_equipment") }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <help />
              </el-icon>
              <span>{{ $t("route.Maintenance_Management") }}</span>
            </template>
            <el-menu-item-group>
              <!-- <el-menu-item index="3-1">异常设备</el-menu-item> -->
              <el-menu-item index="3-2">{{
                $t("route.Report_for_repair_work")
              }}</el-menu-item>
              <el-menu-item index="3-3">{{
                $t("route.Overhaul_facilities")
              }}</el-menu-item>
              <el-menu-item index="3-5">{{
                $t("route.Maintenance_management")
              }}</el-menu-item>
              <el-menu-item index="3-6">{{ $t("route.Abnormal_alarm") }}</el-menu-item>
              <el-menu-item index="3-8">{{ $t("route.Purchase_parts") }}</el-menu-item>
              <el-menu-item index="3-4">{{
                $t("route.Equipment_maintenance_record")
              }}</el-menu-item>
              <el-menu-item index="3-7">{{
                $t("route.Maintenance_worker_maintenance_record")
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="10">
            <template #title>
              <el-icon>
                <document />
              </el-icon>
              <span>{{ $t("route.Device_Configuration") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="10-1">{{
                $t("route.Production_of_single")
              }}</el-menu-item>
              <el-menu-item index="10-4">{{ $t("route.Style_management") }}</el-menu-item>
              <!-- <el-menu-item index="10-1">资源配置</el-menu-item> -->
              <el-menu-item index="10-2">{{
                $t("route.Auxiliary_material_processing")
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="11">
            <template #title>
              <el-icon>
                <timer />
              </el-icon>
              <span>{{ $t("route.Normal_Hours") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="11-1">{{
                $t("route.Details_of_working_hours")
              }}</el-menu-item>
              <el-menu-item index="11-2">{{ $t("route.Time5") }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <magic-stick />
              </el-icon>
              <span>{{ $t("route.Power_energy_consumption_management") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1">{{
                $t("route.Energy_consuming_Supervising")
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="9">
            <template #title>
              <el-icon>
                <files />
              </el-icon>
              <span>{{ $t("route.Data_Management") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="9-1">{{
                $t("route.Equipment_information")
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <user />
              </el-icon>
              <span>{{ $t("route.Personnel_management") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">{{ $t("route.Employee_list") }}</el-menu-item>
              <el-menu-item index="4-2">{{ $t("route.Working_position") }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="8">
            <template #title>
              <el-icon>
                <video-camera />
              </el-icon>
              <span>{{ $t("route.Monitoring_screen") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="8-1">{{ $t("route.Monitoring_kanban") }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-menu-item index="6">
            <template #title>
              <el-icon>
                <goblet />
              </el-icon>
              <span>{{ $t("route.Intelligent_hanging") }}</span>
            </template>
          </el-menu-item>

          <el-sub-menu index="7">
            <template #title>
              <el-icon>
                <expand />
              </el-icon>
              <span>{{ $t("route.Basic_Management") }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="7-1">工厂</el-menu-item>
              <el-menu-item index="7-2">{{ $t("route.Workshop") }}</el-menu-item>
              <el-menu-item index="7-3">{{ $t("route.Group") }}</el-menu-item>
              <el-menu-item index="7-4">{{ $t("route.Station") }}</el-menu-item>
              <el-menu-item index="7-5">{{ $t("route.Warehouse") }}</el-menu-item>
              <el-menu-item index="7-8">{{ $t("route.gateway") }}</el-menu-item>
              <el-menu-item index="7-9">{{ $t("route.Card_Reader") }}</el-menu-item>
              <!-- <el-menu-item index="7-6">工序</el-menu-item> -->
              <el-menu-item index="7-7">{{ $t("route.Notification") }}</el-menu-item>
              <el-menu-item index="7-10">{{ $t("route.Device_category") }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div>
    </div>
    <div>
      <div>
        <img src="../../assets/img/icon-12.png" />

        <div>
          <!-- <div style="color:blueviolet;font-size:small;">{{data}}</div> -->
          <img v-if="false" src="../../assets/img/main-1.png" />
          <img v-if="false" src="../../assets/img/main-2.png" />
          <img @click="docs" src="../../assets/img/avatar.png" />
          <el-dropdown @command="handleCommand" style="margin-left: 20px">
            <span style="color: blueviolet">
              {{ $t("route.first") }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="0">{{ $t("route.USER") }}</el-dropdown-item>
                <el-dropdown-item command="1">{{ $t("route.chinese") }}</el-dropdown-item>
                <el-dropdown-item command="2">{{ $t("route.english") }}</el-dropdown-item>
                <el-dropdown-item command="3">{{
                  $t("route.Change_Password")
                }}</el-dropdown-item>
                <el-dropdown-item command="4">{{
                  $t("route.Sign_Out")
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div>
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
import md5 from "../../js/common/md5.js";

import {
  HomeFilled,
  Cpu,
  Help,
  Document,
  Timer,
  MagicStick,
  Files,
  User,
  VideoCamera,
  Expand,
  Goblet,
} from "@element-plus/icons";

export default {
  components: {
    HomeFilled,
    Cpu,
    Help,
    Document,
    Timer,
    MagicStick,
    Files,
    User,
    VideoCamera,
    Expand,
    Goblet,
  },
  data() {
    return {
      data: null,
    };
  },
  methods: {
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime =
        yy +
        this.$t("route.year") +
        mm +
        this.$t("route.month") +
        dd +
        this.$t("route.day") +
        " " +
        hh +
        ":" +
        mf +
        ":" +
        ss;
      this.data = _this.gettime;
      // console.log(_this.gettime)
    },

    docs() {
      this.$router.push("/user-info");
    },
    handleCommand(index) {
      switch (index) {
        case "0":
          this.$router.push("/user-info");
          break;
        case "1":
          // 切换中文
          this.$i18n.locale = "zh";
          this.$store.commit("setLanguage", "zh");
          break;
        case "2":
          // 切换英文
          this.$i18n.locale = "en";
          this.$store.commit("setLanguage", "en");
          break;
        case "3":
          this.$router.push("/customer/update-pwd");
          break;
        case "4":
          this.$router.push("/");
          break;
      }
    },

    menuSelect(index) {
      switch (index) {
        case "1":
          this.$router.push("/home");
          break;
        case "9-1":
          this.$router.push("/customer/dvservice-home");
          break;
        case "2-1":
          this.$store.commit("setKind", null);
          this.$router.push("/device-list");
          break;
        case "2-2":
          this.$router.push("/lend-record");
          break;
        case "2-3":
          this.$router.push("/borrow-record");
          break;
        case "2-5":
          this.$router.push("/scrap-device");
          break;
        case "2-6":
          this.$router.push("/use-record");
          break;
        case "3-1":
          this.$router.push("/abnormal-device");
          break;
        case "3-2":
          this.$router.push("/repair-order");
          break;
        case "3-3":
          this.$router.push("/capital-device");
          break;
        case "3-4":
          this.$store.commit("setNoseCode", null);
          this.$router.push("/repair-record");
          break;
        case "3-5":
          this.$router.push("/maintain");
          break;
        case "3-6":
          this.$router.push("/alarm-news");
          break;
        case "3-7":
          this.$router.push("/machine-repair");
          break;
        case "3-8":
          this.$router.push("/part-list");
          break;
        case "4-1":
          this.$router.push("/user-list");
          break;
        case "4-2":
          this.$router.push("/turner-skill");
          break;
        case "5-1":
          this.$router.push("/electric-monitor");
          break;
        case "7-1":
          this.$router.push("/factory");
          break;
        case "7-2":
          this.$router.push("/workshop");
          break;
        case "7-3":
          this.$router.push("/pro-line");
          break;
        case "7-4":
          this.$router.push("/station");
          break;
        case "7-5":
          this.$router.push("/store");
          break;
        case "7-6":
          this.$router.push("/craft");
          break;
        case "7-7":
          this.$router.push("/notice");
          break;
        case "7-8":
          this.$router.push("/gateway");
          break;
        case "7-9":
          this.$router.push("/uhf");
          break;
        case "7-10":
          this.$router.push("/device-kind");
          break;
        case "8-1":
          var mobile = this.$store.state.mobile;
          var password = this.$store.state.password;
          window.open(
            "/hikari-iot-board/#/pages/home?mobile=" +
              mobile +
              "&password=" +
              md5(password)
          );
          break;
        case "10-1":
          this.$router.push("/arrange-order");
          break;
        case "10-2":
          this.$router.push("/accessory-order");
          break;
        case "10-3":
          this.$router.push("/pro-order");
          break;
        case "10-4":
          this.$router.push("/style");
          break;
        case "11-1":
          this.$router.push("/std-sew");
          break;
        case "11-2":
          this.$router.push("/history-dur");
          break;
      }
      console.log(index);
    },
  },
  created() {
    /* 每20秒对list方法进行一次刷新 */
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
.main {
  height: 100vh;
  background-color: #eeeeee;
  display: flex;
  flex-direction: row;

  > div:nth-of-type(1) {
    width: 200px;
    min-width: 180;
    background-color: #222453;
    overflow: scroll;

    > div:nth-of-type(1) {
      width: 100%;
      text-align: center;
      margin-top: 30px;

      > img {
        width: 150px;
        height: 26px;
      }
    }

    > div:nth-of-type(2) {
      margin-top: 40px;
    }
  }

  > div:nth-of-type(2) {
    flex: 1;
    padding-left: 20px;
    min-width: 1080px;

    > div:nth-of-type(1) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 10px 20px;

      > img:nth-of-type(1) {
        width: 600px;
        height: 28px;
      }

      > div:nth-of-type(1) {
        display: flex;
        justify-content: center;
        align-items: center;

        > img:nth-of-type(1) {
          width: 60px;
          height: 60px;
          margin-left: 20px;
        }
      }
    }
  }

  .el-menu {
    border: 0 !important;
  }
}
</style>
